<template>
  <div class="header_content">
    <div class="header flex-row justify-center">
      <div class="head_content flex-row">
        <div class="flex-row" @click="$router.push({ path: '/bigdata' })">
          <img style="height: 27px; width: 34px; margin-top: 25px" src="../../static/bigdata/icon_name.png" alt="" />
          <p class="name">{{ companyName }}</p>
        </div>
        <div class="flex-1" @click="$router.push({ path: '/bigdata' })"></div>
        <div class="flex-row header_right">

          <div class="flex-1 right_item flex-row align-center" @click="$router.push({ path: '/bigVideo' })">
            <img src="../../static/bigdata/icon_manage.png" class="right_img" alt="" />
            视频监控
          </div>
          <div class="flex-1 right_item flex-row align-center" @click="$router.push({ path: '/warnManage/warnlist' })">
            <!-- <el-badge :value="3"> -->
            <img src="../../static/bigdata/icon_warning.png" class="right_img" alt="" />
            <!-- </el-badge> -->
            报警警报
          </div>
          <div class="flex-1 right_item flex-row align-center"
            @click="$router.push({ path: '/serverManage/equipmentlist' })">
            <img src="../../static/bigdata/icon_user.png" class="right_img" alt="" />
            管理中心
          </div>
        </div>
      </div>
    </div>
    <dia></dia>
  </div>
</template>
<script>
import dia from '@/components/Warmdialog/index.vue'
import { getUserInfo } from '@/utils/auth' // get token from cookie
export default {
  components: {
    dia
  },
  data() {
    return {
      companyName: '中安合顺'
    }
  },
  mounted() {
    let user = getUserInfo()
    let userInfo = JSON.parse(user)
    if (userInfo.company_name) {
      this.companyName = userInfo.company_name
    }
  }

}
</script>
<style lang="scss" scoped>
.header_content {
  position: relative;

  .header {
    height: 186px;
    background-image: url("../../static/bigdata/head.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: auto 100%;

    .head_content {
      width: 100%;
      padding: 0 20px 0 20px;
      color: #fff;

      .name {
        font-size: 25px;
        padding-left: 22px;
        font-weight: bold;
        background: -webkit-linear-gradient(to top, #00f5f7, #fff);
        background: linear-gradient(to top, #00f5f7, #ffffff);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        /*给文字设置成透明*/
      }

      .header_right {
        margin-top: -100px;

        .right_item {
          padding-left: 22px;
          font-size: 20px;
          min-width: 150px;
          cursor: pointer;

          .right_img {
            padding-right: 10px;
          }
        }
      }
    }
  }
}
</style>
